<template>
  <div class="meterage-manage-detail">
    <el-dialog
      width="60%"
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      v-dialog-drag
      class="image-progress-detail"
      append-to-body
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <span slot="title">
       <span>{{title}}</span>
      </span>
      <el-tabs v-model="activeName" v-show="detailType!=='build'&&detailType!=='edit'">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      </el-tabs>
      <div class="WholeScroll" style="max-height: 550px; overflow: auto;padding: 0 15px;">
        <el-form :model="formBaseData" ref="formBaseData" v-show="activeName == 'first'" :rules="formBaseRules">

          <el-row>
            <el-col :span="12">
              <el-form-item label="项目" prop="projectName" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.projectName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称" prop="contractName" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.contractName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位" prop="companyName" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.companyName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.name" placeholder="" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="性别" prop="sex" :label-width="formlabelWidth">
                <el-select
                  style="margin: 0; margin-right: 15px;width: 100%"
                  class="select"
                  size="small"
                  v-model="formBaseData.sex"
                  :disabled="detailType === 'check'"
                  value-key="id"
                  placeholder="选择性别"
                  clearable
                >
                  <el-option
                    v-for="item in sexArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="idCardNo" :label-width="formlabelWidth">
                <el-input  size="small" v-model="formBaseData.idCardNo" placeholder=""
                           :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="age" :label-width="formlabelWidth">
                <el-input  size="small" v-model="formBaseData.age" placeholder="" oninput="value=value.replace(/[^0-9]/g,'')"
                           :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="contactInformation" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.contactInformation" placeholder="" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="在职情况" prop="jobStatus" :label-width="formlabelWidth">
                <el-select
                  style="margin: 0; margin-right: 15px;width: 100%"
                  class="select"
                  size="small"
                  v-model="formBaseData.jobStatus"
                  :disabled="detailType === 'check'"
                  value-key="id"
                  placeholder="选择性别"
                  clearable
                >
                  <el-option
                    v-for="item in statusArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择岗位" prop="post" :label-width="formlabelWidth">
                <el-input  size="small" v-model="formBaseData.post" placeholder=""
                           :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资格证书类型名称" prop="certificateType" :label-width="formlabelWidth">
                <el-input  size="small" v-model="formBaseData.certificateType" placeholder=""
                           :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书编号" prop="certificateNumber" :label-width="formlabelWidth">
                <el-input  size="small" v-model="formBaseData.certificateNumber" placeholder=""
                           :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="工作内容"   prop="content" :label-width="formlabelWidth">
                <el-input
                  class="fill"
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 20}"
                  placeholder=""
                  v-model="formBaseData.content"
                  :disabled="detailType === 'check' "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="formTitle">附件</div>
          <cmsFileTable
            ref="cmsFileTable"
            :buildUnitTable="buildUnitTable"
            :fileSystem="fileSystem"
            :detailId="detailId"
            :detailType="detailType"
            :buttonDelShow="buttonDelShow"
            :showNone="showNone"
            :buttonCheckShow="buttonCheckShow"
            :buttonUploadShow="buttonUploadShow"
            @change="tableChange"
          >
          </cmsFileTable>

        </el-form>

      </div>


      <div slot="footer" class="dialog-footer">


        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button
            size="small"
            type="primary"
            :loading="isLoading"
            @click="handleClickDeal('submit', { flag: 1 })"
          ><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"
        ><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
//  复制粘贴改下面的名字
import projectSectionInfo from "@/api/buss/common";
import msgUtil from '@/utils/msgUtil'

import safeProblemDeal from "@/api/buss/safeProblemDeal";
import sectionInfo from "@/api/buss/sectionInfo";

export default {
  name: `sonList-detail`,
  components: {

  },

  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      },
    },
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      if (this.detailType == 'build') {
        this.title = '新增履约人员信息'

      } else if (this.detailType == 'check') {
        this.title = '查看履约人员信息 '
      } else if (this.detailType == 'edit') {
        this.title = '编辑履约人员信息 '
      }else {
        this.title = ''
      }

      // 详情id
      this.detailId = value.detailId === undefined ? '0' : value.detailId
      if (this.detailType !== 'build') {
        //this.initData()
        // 获取详情请求
        this.getDetail()
      }

      this.contractId = value.params.contractId === undefined ? '0' : value.params.contractId
      this.projectId = value.params.projectId === undefined ? '0' : value.params.projectId
      this.projectName = value.params.projectName === undefined ? '0' : value.params.projectName
      this.contractName = value.params.contractName === undefined ? '0' : value.params.contractName
      this.companyName = value.params.companyName === undefined ? '0' : value.params.companyName

      this.$set(this.formBaseData,'projectName',this.projectName)
      this.$set(this.formBaseData,'contractName',this.contractName)
      this.$set(this.formBaseData,'companyName',this.companyName)
      this.$set(this.formBaseData,'projectId',this.projectId)
      this.$set(this.formBaseData,'contractId',this.contractId)


    }
  },
  data() {
    return {
      contractId:'',
      projectId:'',
      projectName:'',
      contractName:'',
      companyName:'',
      readonly:false,
      entity: {},
      fileList: [],
      title: '',
      isLoading: false,
      dialogColumn: '2',
      sexArr:[{
        name: '男',
        id: '1'
      },{
        name: '女',
        id: '2'
      }],
      statusArr:[{
        name: '在职',
        id: '1'
      },{
        name: '离职',
        id: '2'
      }],
      formBaseData: {
        projectId:'',
        contractId:'',
        projectName: '',
        contractName: '',
        companyName: '',
        name:'',
        sex:'',
        idCardNo:'',
        age:'',
        contactInformation: '',
        jobStatus: '',
        post: '',
        certificateType:'',
        certificateNumber:'',
        content:'',
      },
      //  被选中的用于新增的项目
      showSelectDialog: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      activeName: 'first', //
      formShow: false, // 表单展示
      formlabelWidth: '140px', // 表单左侧标题宽度
      //  当前操作数据的所属合同号
      // 文件系统的参数
      fileSystem: {
        attachId: {
          partOne: '',
          partTwo: '',
          partThree: '',
          partFour: '',
          other: '',
        },
        sys: 'buss',
        module: 'performancePerson',
        entityClass: 'performancePerson',
        viewByAnon: true,
        longLife: false,
        part: {
          partOne: 'partOne',
          partTwo: 'partTwo',
          partThree: 'partThree',
          partFour: 'partFour',
          other: 'other',
        },
      },

      formBaseRules: {
        projectName: [
          {required: true, message: '请输入' + '项目', trigger: 'change'},
        ],
        contractName: [
          {required: true, message: '请输入' + '合同名称', trigger: 'change'},
        ],
        companyName: [
          {required: true, message: '请输入' + '单位名称', trigger: 'change'},
        ],
        name: [
          {required: true, message: '请输入' + '姓名', trigger: 'blur'},
        ],
        contactInformation: [
          {required: true, message: '请输入' + '联系方式', trigger: 'blur'},
        ],
        jobStatus: [
          {required: true, message: '请选择' + '在职情况', trigger: 'blur'},
        ],
        post: [
          {required: true, message: '请输入' + '岗位', trigger: 'blur'},
        ],
        certificateType: [
          {required: true, message: '请输入' + '资格证书类型名称', trigger: 'blur'},
        ],
        idCardNo:[
          {required: true, message: '请输入' + '身份证号码', trigger: 'blur'},
        ],
        sex:[
          {required: true, message: '请选择' + '性别', trigger: 'blur'},
        ],
      }, // 表单基本信息验证


      entityId:'',
      buildUnitTable: [{
        stuffName: '岗位证明材料',
        part: 'partOne',
        file: [{ realName: '' }],
        isNeed: false,
        loading: false,
        isMulti: true
      },{
        stuffName: '其他',
        part: 'partTwo',
        file: [{ realName: '' }],
        isNeed: false,
        loading: false,
        isMulti: true
      }],
    }
  },

  created() {

  },
  methods: {


    /**
     * 重置主表数据
     * */
    resetFormData() {
      this.formBaseData = {
        projectId:'',
        contractId:'',
        projectName: '',
        contractName: '',
        companyName: '',
        name:'',
        sex:'',
        idCardNo:'',
        age:'',
        contactInformation: '', // 标题
        jobStatus: '', // 工程名称
        post: '', // 桩号
        certificateType:'',//问题描述
        certificateNumber:'',//处理结果
        content:'',//处理日期
      }

      this.sexArr=[{
        name: '男',
        id: '1'
      },{
        name: '女',
        id: '2'
      }],
      this.statusArr=[{
        name: '在职',
        id: '1'
      },{
        name: '离职',
        id: '2'
      }]
    },

    /***
     * 提交保存数据
     * */
    submitDetail(flag, callback) {
      let submit = '/buss/performanceperson/add'
      if (this.detailType === 'build') {
        submit = '/buss/performanceperson/add'
      } else {
        submit = '/buss/performanceperson/edit'
      }

      this.formBaseData.contractId = this.contractId;
      this.formBaseData.projectId = this.projectId;
      this.$httpPost(submit, this.formBaseData).then(res => {
        if (res.code ==200) {
          this.$messageSuccess('保存成功')
          this.formShow = false
          this.detailId = res.data.id;
          this.isLoading = false
          if (callback) callback(res.data)
        } else {
          this.isLoading = false
          this.$messageError(res.data.message)
        }
      }).catch(e => {
        console.log('请求出现错误',e);
        this.isLoading = false
        console.log("提交失败", e);
        this.$messageError('请求失败')
      })
    },
    /**
     * 获取详情并整理数据
     * */
    getDetail() {
      this.$httpPost(`buss/performanceperson/performancePersonGetOne?id=${this.detailId}`, {}).then( (res) => {
        if (res.code == 200) {
          this.formBaseData=res.data

          this.formBaseData.projectName=this.projectName
          this.formBaseData.contractName=this.contractName
          this.formBaseData.companyName=this.companyName
          this.formBaseData.projectId=this.projectId
          this.formBaseData.contractId=this.contractId

          this.formBaseData.sex = String(res.data.sex)
          this.formBaseData.jobStatus = String(res.data.jobStatus)
        }else {
          msgUtil.error2(res.msg)
        }
      }).catch(() => {
        msgUtil.error2("获取详情信息失败")
      })
    },



    saveFiles() {
      this.$refs['cmsFileTable'].bindAllFile(this.detailId)
    },

    /**
     * 控制上传按钮显示
     * @param row
     * @returns {boolean}
     */
    buttonUploadShow(row) {
      let flag = false
      if (
        this.detailType === 'build' ||
        this.detailType === 'edit'
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport) {
      //   flag=true
      // }
      return flag
    },
    /**
     * 控制查看按钮显示
     * @param row
     */
    buttonCheckShow(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName !== ''
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport) {
      //   flag=false
      // }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     *控制显示暂无文件
     * @param row
     */
    showNone(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName === ''
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport) {
      //   flag=false
      // }
      return flag
    },
    /**
     *显示删除按钮
     * @param row
     */
    buttonDelShow(row) {
      let flag = false
      if (
        (this.detailType === 'build' || this.detailType === 'edit') &&
        row.file[0].realName !== '' &&
        !row.isNeed
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport&&row.file[0].realName!==''&&!row.isNeed) {
      //   flag=true
      // }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    ////////////////////////////////以上是附件上传所需代码

    tableChange(val) {
      this.$set(this, 'buildUnitTable', [...val])
    },

    handleSelectionChange(val) {
      console.log(val)
    },

    handleClick(activeName) {
      console.log(activeName)
    },

    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          this.buildUnitTable = [
            {
              stuffName: '岗位证明材料',
              part: 'partOne',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },{
              stuffName: '其他',
              part: 'partTwo',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            }
          ]
          // 清空表单内容
          this.resetFormData();
          this.contractId='',
          this.projectId='',
          this.projectName='',
          this.contractName='',
          this.companyName='',
          this.detailId = ''
          this.isShowBpmn=false
          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              // 再验证其他内容
              // 整理文件信息
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                this.saveFiles()
                this.isLoading = false
                // 传值给父组件刷新列表
                this.$emit('reloadList')
                this.$notify({
                  title: '保存成功',
                  type: 'success',
                  duration: 1500
                })
              })
            }
          })
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">
  .fee_add {
    color: #008fe0;
    border-color: #008fe0;
    float: right;
    margin-bottom: 10px;
  }

  .el-input__inner {
    width: 291px;
  }

  .secondPanTop {
    .el-button--primary {
      color: #409EFF;
      background-color: #ffffff;
      font-size: 13px;
      padding: 10px 5px;
    }
  }

  .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .flex-center {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .dialogTableDiv {
    width: 100%;
    margin: 0 auto;
    .tableTitle {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      p {
        font-size: 16px;
      }
      .add {
        background-color: #ffffff;
        color: rgb(73, 163, 250);
      }
    }
  }

  .meterage-manage-detail .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 255px;
  }

  /*.tree-menu {*/
  /*color: black !important;*/
  /*div{*/
  /*color: black !important;*/
  /*}*/
  /*}*/
</style>
<style lang="scss">
  .el-message-box {
    .el-message-box__btns {
      .el-button {
        font-size: 14px;
      }
    }
  }
</style>

